﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        div.WindowMask
        {
            width: 100% !important;
            height: 100% !important;
            left: 0px;
            top: 0px;
            background-color: Gray;
            position: absolute;
            opacity: 0.3;
            display: none;
        }
        div.Panel
        {
            position:absolute;
        }
        
    </style>
    <script src="../js/jquery.js"></script>
    <script src="../js/mootools.js"></script>
    <script src="../js/base.js"></script>
    <script type="text/javascript">

        function PTA() { };
        PTA.extend({
            GetID: function () { window.top.CurrentUniqueID = window.top.CurrentUniqueID || 1; return "pta_ctl_uid_" + window.top.CurrentUniqueID++; },
            GetZ: function () { window.top.CurrentZIndex = window.top.CurrentZIndex || 1; return window.top.CurrentZIndex++; }
        })
        PTA.Panel = new Class({
            initialize: function (selector, opts) {
                var me = this;
                Width = opts["Width"];
                Height = opts["Height"];
                ShowMask = opts["ShowMask"];
                me.ctl = $("<div>").addClass("Panel").append($(selector)).appendTo(document.body);
                if (ShowMask)
                {
                    //创建Mask标记
                    me.mask = $("<div>", { "id": PTA.GetID(), "class": "WindowMask" }).css({ "z-index": PTA.GetZ() }).appendTo(document.body);
                }
                me.ctl.css({ "z-index": PTA.GetZ() });
            },
            Show: function () {
                this.mask.show();
                this.ctl.show();
            },
            Hide: function () {
                this.ctl.hide();
                this.mask.hide();
            }
        });

        
        $(function () {
            var p = new PTA.Panel("#cccccc", { "Width": "300px", "Height": "200px", "ShowMask": false });
            p.Show();
            $("input:button").click(function () {
                p.Hide();
            });
        });
    </script>
</head>
<body>
    <div id="cccccc" style="background-color: yellow; width:300px; height:200px">
        <input type="button" value="隐藏" />
    </div>
</body>
</html>
